<template>
  <div>
    <div class="top-content">
      <a-card class="w-[80%]">
        <table class="topClose" width="100%">
          <thead>
            <tr>
              <th class="!text-left !px-2">
                <a-button
                  size="small"
                  class="mr-2"
                  type="primary"
                  :disabled="typeof Data.selectedIndex == 'string'"
                  @click="refresh"
                  :loading="Data.myworkStLoading"
                >
                  刷新
                </a-button>
                请选择评阅科目
              </th>
              <th>科目评阅阶段</th>
              <!-- <th>科目试卷总数</th> -->
              <!-- <th colspan="2"> 客观题</th> -->
              <th colspan="2"> 主观题</th>
              <th colspan="2"> 重评题</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="!text-left !py-1 !px-2">
                <a-radio-group
                  v-model:value="Data.selectedIndex"
                  name="radioGroup"
                  @change="selecheng"
                >
                  <a-radio
                    :value="index"
                    v-for="(item, index) in Data.SeleOptions"
                    :key="item.kmdm"
                  >
                    {{ `${item.kmdm}(${item.kmmc})` }}
                  </a-radio>
                </a-radio-group>
                <a-spin :spinning="Data.myworkLoading" />
                <div
                  class="text-[15px] text-[#999] text-center"
                  v-if="!Data.myworkLoading && Data.SeleOptions.length === 0"
                >
                  <span> 暂无数据 </span>
                </div>
              </td>
              <td class="text-[red] text-[20px]">
                {{ statusEnum[Data.SeleOptions[Data.selectedIndex]?.pyjd] }}
                <div
                  class="text-[15px] text-[#999] text-center"
                  v-if="!Data.selectedIndex && Data.selectedIndex !== 0"
                >
                  请选择科目
                </div>
              </td>
              <!-- <td colspan="2">
                <a-radio-group v-model:value="Data.radioGroupArr">
                  <div v-for="(item, key) in Data.objectiveMap" class="mr-3 mb-2">
                    <span class="text-[14px] mr-2 font-semibold">{{ item.mkmc }}:</span>
                    <a-radio
                      :value="every"
                      v-for="(every, index) in item.pyDataList"
                      :key="item.stId"
                    >
                      {{ every.tmbh }}：{{ every.tmlx }}
                    </a-radio>
                  </div>
                  <a-spin :spinning="Data.myworkStLoading" />
                  <div
                    class="text-[15px] text-[#999] text-center"
                    v-if="Data.objectiveMap.length === 0 && !Data.myworkStLoading"
                  >
                    {{ typeof Data.selectedIndex !== 'number' ? '请选择科目' : '暂无数据' }}
                  </div>
                </a-radio-group>
              </td> -->
              <td colspan="2">
                <a-radio-group v-model:value="Data.radioGroupArr">
                  <div v-for="(item, key) in Data.subjectiveMap" class="mr-3 mb-2">
                    <!-- <span class="text-[14px] mr-2 font-semibold">{{ item.mkmc }}:</span>    -->
                    <a-radio
                      :value="every"
                      v-for="(every, index) in item.pyDataList"
                      :key="every.stId"
                    >
                      {{ every.tmbh }}：{{ every.tmlx }}
                    </a-radio>
                  </div>
                  <a-spin :spinning="Data.myworkStLoading" />
                  <div
                    class="text-[15px] text-[#999] text-center"
                    v-if="Data.subjectiveMap.length === 0 && !Data.myworkStLoading"
                  >
                    {{ typeof Data.selectedIndex !== 'number' ? '请选择科目' : '暂无数据' }}
                  </div>
                </a-radio-group>
              </td>
              <td colspan="2">
                <a-radio-group v-model:value="Data.radioGroupArr">
                  <span v-for="(item, key) in Data.heavyMap" class="mr-3 mb-2">
                    <a-radio :value="item" :key="item.stId">
                      {{ item.tmbh }}
                    </a-radio>
                  </span>
                  <a-spin :spinning="Data.myworkCpStLoading" />
                  <div
                    class="text-[15px] text-[#999] text-center"
                    v-if="Data.heavyMap?.length === 0 && !Data.myworkCpStLoading"
                  >
                    {{ typeof Data.selectedIndex !== 'number' ? '请选择科目' : '暂无数据' }}
                  </div>
                </a-radio-group>
              </td>
            </tr>
          </tbody>
        </table>
      </a-card>
      <div class="btn-content">
        <a-button
          class="correct-btn"
          :class="{ correctBtnOverStyle: hasTopicList }"
          :disabled="!hasTopicList"
          @click="showTipMole"
        >
          开始评阅
        </a-button>
      </div>
    </div>

    <rework-list :SelectItem="Data.SeleOptions[Data.selectedIndex]" />

    <!--  -->
    <review-modal
      @goPaperPage="goPaperPage"
      :seleObj="Data.SeleOptions[Data.selectedIndex]"
      v-model:reaiewVisible="Data.reaiewVisible"
    />
  </div>
</template>
<script lang="ts" setup name="Index">
import { isJdCorrectType } from '/@/views/examination-audit/abnormal-teacher/index'
import { useFullscreen } from '@vueuse/core'
import { getKmPyjd } from '/@/api/examinationAudit'
const { isFullscreen, enter, exit } = useFullscreen()

import { useUserStore } from '/@/store/modules/user'
const userStore = useUserStore()
const userInfo = computed(() => userStore.getUserInfo)

import { computed, reactive, onActivated } from 'vue'

onActivated(async () => {
  exit()
  await getMyWork()
  Data.radioGroupArr = {
    stId: '',
  }
  if (typeof Data.selectedIndex === 'number') {
    selecheng()
  }
})

import reworkList from './components/reworkList.vue'
import reviewModal from './components/reviewModal.vue'

import { statusEnum } from '/@/enums/privateEnums'

import {
  myReviewWork,
  getExtractZycKgt,
  getExtractZycZgt,
  getCpDataByAccount,
  getPyDataSelectList,
  checkHasExistsPyzData,
} from '/@/api/teacher'

import { useMessage } from '/@/hooks/web/useMessage'
import { useTeacherMarkStore } from '/@/store/modules/teacherMark'
const teacherMarkStore = useTeacherMarkStore()
const { createMessage } = useMessage()

import { useRouter } from 'vue-router'
const router = useRouter()

import { setAuthCache } from '/@/utils/auth'

const questionsInfo = computed(() => teacherMarkStore.getQuestions)

//开始评阅
async function showTipMole() {
  if (!Data.radioGroupArr.stId) return createMessage.error('请选择评阅题号')

  // 获取试卷类型
  if (!Data.radioGroupArr.pyZycIdList) {
    let requestfun = getExtractZycZgt
    if (isJdCorrectType(Data.radioGroupArr)) {
      // 判断是否为机读题
      requestfun = getExtractZycKgt
    }
    let { code, data, message } = await requestfun({
      kmdm: Data.SeleOptions[Data.selectedIndex]?.kmdm,
      stId: Data.radioGroupArr.stId,
    })
    if (code == 200) {
      teacherMarkStore.setQuestions(data)
      Data.reaiewVisible = true
    } else {
      createMessage.error(message)
    }
  } else {
    teacherMarkStore.setQuestions(Data.radioGroupArr)
    goPaperPage()
  }
}

// 获取试卷类型

// 评卷
async function goPaperPage() {
  setAuthCache('pointOfTime', new Date().getTime())
  let name = 'Review'
  if (isJdCorrectType(questionsInfo.value)) {
    name = 'TeacherChoice'
  }
  if (!isFullscreen.value) {
    enter()
  }
  router.push({
    name,
    query: {
      ...Data.SeleOptions[Data.selectedIndex],
      time: +new Date(),
    },
  })
  Data.reaiewVisible = false
}

const Data = reactive<any>({
  SeleOptions: [],
  selectedIndex: '',
  objectiveMap: [], // 客观题
  subjectiveMap: [], // 主观题
  heavyMap: [], // 重评题
  radioGroupArr: {}, //选中待评阅的试题
  reaiewVisible: false, // 弹窗
  myworkLoading: false,
  myworkStLoading: false,
  myworkCpStLoading: false,
})

// 判读是否还有可评阅的试题
const hasTopicList = computed(
  () => !!Data.heavyMap.length || !!Data.objectiveMap.length || !!Data.subjectiveMap.length
)

// 我的评阅工作
const getMyWork = async () => {
  Data.myworkLoading = true
  let { code, data } = await myReviewWork({})
  if (code == 200 && data && data.length) {
    Data.SeleOptions = data
  }
  Data.myworkLoading = false
}

async function refresh() {
  await getMyWork()
  selecheng()
  createMessage.success('刷新成功')
}

// 获取待评阅的试题
async function getPyDataSelecFun() {
  Data.objectiveMap = []
  Data.subjectiveMap = []
  let { code, data, message } = await getPyDataSelectList({
    kmdm: Data.SeleOptions[Data.selectedIndex].kmdm,
  })
  if (code == 200) {
    data.forEach(ele => {
      let objMap: any = [],
        subMap: any = []
      ele.pyDataList.sort((a, b) => {
        return a.tmxh - b.tmxh
      })
      ele.pyDataList.forEach(item => {
        if (isJdCorrectType(item)) {
          objMap.push(item)
        } else {
          subMap.push(item)
        }
      })
      if (objMap.length > 0) {
        Data.objectiveMap.push({
          ...ele,
          pyDataList: objMap,
        })
      }
      if (subMap.length > 0) {
        Data.subjectiveMap.push({
          ...ele,
          pyDataList: subMap,
        })
      }
    })
  } else {
    createMessage.error(message)
  }
  Data.myworkStLoading = false
}

/**
 * 获取待重评的题吗
 */
async function getTodoDaYcXx() {
  Data.heavyMap = []
  let { code, data } = await getCpDataByAccount({
    kmdm: Data.SeleOptions[Data.selectedIndex]?.kmdm,
  })
  if (code == 200) {
    data?.sort((a, b) => a.tmxh - b.tmxh)
    Data.heavyMap = data || []
  }
  Data.myworkCpStLoading = false
}

// 获取科目阶段
async function getKmpyJd() {
  const { code, data } = await getKmPyjd({
    kmdm: Data.SeleOptions[Data.selectedIndex].kmdm,
    sysYear: userInfo.value?.kmYear,
  })
  if (code == 200) {
    Data.SeleOptions[Data.selectedIndex].pyjd = data
  }
}

// 科目选择
function selecheng() {
  getPyzSt()
  getTodoDaYcXx()
  getPyDataSelecFun() //获取试题
  getKmpyJd() //获取科目阶段
  Data.myworkStLoading = true
  Data.myworkCpStLoading = true
}

function getPyzSt() {
  checkHasExistsPyzData({
    account: userInfo.value?.account,
    kmdm: Data.SeleOptions[Data.selectedIndex]?.kmdm,
    zpDataFlag: Data.SeleOptions[Data.selectedIndex]?.pyjd == 'FORMAL',
  }).then(({ code, data }) => {
    if (code == 200 && data) {
      teacherMarkStore.setQuestions(data)
      Data.reaiewVisible = true
    }
  })
}
</script>
<style lang="less" scoped>
.top-content {
  display: flex;
  margin-bottom: 15px;

  .btn-content {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;

    .correct-btn {
      width: 220px;
      height: 220px;
      margin-top: 20px;
      font-size: 28px;
      letter-spacing: 2px;
      font-weight: 700;
      color: #fff;
      border-radius: 50%;
      border: 8px solid #fff;
      background-color: #b0ccec;

      @keyframes Twinkle {
        from {
          transform: scale(1.1);
        }

        25% {
          transform: scale(0.9);
        }

        50% {
          transform: scale(1.05);
        }

        75% {
          transform: scale(0.95);
        }

        to {
          transform: scale(1);
        }
      }
    }

    .correctBtnOverStyle {
      background-color: #2c7fdd;
      transform: scale(1);
      animation: Twinkle 2s 0s 1;
    }
  }

  .topClose {
    text-align: center;

    thead tr th {
      text-align: center;
      border: 1px solid #e8e8e8;
      line-height: 60px;
      background-color: #eff6ff;
      width: 13%;
      &:nth-child(n + 3) {
        width: 20%;
      }
      &:nth-last-child(2) {
        width: 30%;
      }
    }

    tbody tr td {
      text-align: center;
      border: 1px solid #e8e8e8;
      line-height: 40px;
      width: 13%;

      &:nth-child(n + 3) {
        box-sizing: border-box;
        padding: 10px;
        text-align: start;
      }

      ::v-deep(.ant-select-selector) {
        border: none;
        background-color: #1890ff;

        .ant-select-selection-item {
          color: #fff;
        }
      }

      ::v-deep(.ant-radio-inner) {
        background-color: #999999;
        border-width: 4px;
      }

      .tipmasage {
        color: #999999;
      }
    }
  }
}
</style>
